<template>
	<view style="margin-bottom: 50upx;">
		<view class="swiperBox">
			<u-swiper :list="list" mode="none" height="550" @change="onChange"   :autoplay="false"></u-swiper>
		</view>
		
		<view class="btnBox">
			<view :class="da.category=='全屋设计'?'activation':''" @click="quehuan('全屋设计')">
				全屋设计
			</view>
			<view :class="da.category=='厨房'?'activation':''"  @click="quehuan('厨房')">
				厨房
			</view>
		</view>
		
		<view class="inpBox">
			<view>
				<view>您的姓名</view>
				<view style="width: 90%; border-bottom: 1px solid #888888;">
					<u-input placeholder=" " v-model="da.name"  />					
				</view>
			</view>
			
			<view>
				<view>手机号码</view>
				<view style="width: 90%; border-bottom: 1px solid #888888;">
					<u-input placeholder=" "  v-model="da.mobileno" />					
				</view>
			</view>
			
			<!-- <button open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">手机号</button> -->
			
		</view>
		
		<view class="box">
			<view style="font-size: 22upx; ">预约城市</view>
			<view style="height: 60upx; line-height: 60upx;
			border-bottom: 1px solid #888888;
			"
			><u-input placeholder=" " v-model="da.city"  /></view>
		

		</view>
		
		
		
		
		<view class="xieyi">
			<u-checkbox v-model="ischecked" >
				
				<view class="itenTxt">
					我同意shiru将本人
					<text @click="toappointment" style="color: #4399FC;">预约信息</text>
					分享给 调研公司并接受shiru满意度电话调研。
				</view>
				
			</u-checkbox>
			
		</view>
		
		<view class="onbtn" @click="setCommitInfo">
			免费预约设计师
		</view>
		
		<view style="font-size: 36upx; height: 50upx; line-height: 50upx; text-align: center; margin-top: 30upx; font-weight: 700;">
			设计案例
		</view>
		<view class="msg"  v-for="(itme,index) in msg" :key="index" @click="navToDetails(itme.articleUuid)">
			
			<view>
				<image :src="itme.coverImageUrl"></image>
				<view style="padding: 20upx 0;">{{itme.title}}</view>
				<!-- <view class="sjcss">{{itme.publishTime}}</view> -->
			</view>
			
			
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list:[{image:"https://vkceyugu.cdn.bspapp.com/VKCEYUGU-3e676a2f-3358-41b1-bc69-7d45353b9d6e/4291c77e-2d97-40f8-8915-e971b64402cf.png"},
				{image:"https://vkceyugu.cdn.bspapp.com/VKCEYUGU-3e676a2f-3358-41b1-bc69-7d45353b9d6e/277b1766-9605-4f8b-b91e-59a56e79a062.png"}],
				list2:[],
				show:false,
				msg:[],
				da:{
					'category':'全屋设计',
					'type':2
				},
				ischecked:""
			}
		},
		methods: {
			onChange(index){
				
				if(index ==0){
					this.da.category="全屋设计"
					this.list2=[]
					this.list2.push(this.list[0],this.list[1])
				}else{
					this.da.category="厨房"
					this.list2=[]
					this.list2.push(this.list[1],this.list[0])
				}
				
			},
			// 获取分类
			getinquiryTag(){
				this.$api.request.articleList({tagDTO:{
						tagName: "商用案例"
					},
					startIndex:0,
					pageSize:10}, (res)=> {
					if (res.body.status.statusCode === '0') {
						this.msg=res.body.data.articles;
						console.log(this.msg)
					}
				})
			},//新闻详情
			navToDetails(item){
				
				uni.navigateTo({
					url:'/pages/content/videoDetails?id='+item
				})
			},
			setCommitInfo(){
				if(!this.da.name ||!this.da.mobileno ||!this.da.city ||!this.da.category ){
					uni.showToast({
					    title: '请输入完整信息',
					    duration: 2000
					});
					return
				}else if(this.ischecked !=true){
					uni.showToast({
					    title: '请同意预约信息',
					    duration: 2000
					});
					return
				}
				this.$api.request.setCommitInfo(this.da, (res)=> {
					if (res.body.status.statusCode === '0') {
						uni.showToast({
						    title: '提交成功',
						    duration: 2000
						});
					}
				})
			},
			quehuan(msg){
				this.da.category=msg
				if(msg =="全屋设计"){
					this.list=[]
					this.list.push(this.list2[0],this.list2[1])
				}else{
					this.list=[]
					this.list.push(this.list2[1],this.list2[0])
				}
				
			},
			getPhoneNumber(e){
				console.log(e)
			},
			toappointment(){
				uni.navigateTo({
					url:'/pages/appointment/child/ReservationInfo'
				})
			}
		},
		mounted() {
			this.getinquiryTag()
		},
		onLoad(obj) {
			this.list2=this.list;
			if(obj.name){
				this.quehuan(obj.name)
			}
		}
	}
</script>

<style lang="scss">
	.btnBox{
		padding-top: 20upx;
		view{
			width: 200upx;
			height: 80upx;
			line-height: 80upx;
			background-color: #EFF2F3;
			color: #000000;
			display: inline-block;
			border-radius: 30upx;
			margin-left: 30upx;
			text-align: center;
		}
		view.activation{
			color: #FFFFFF;
			background-color:#333333;
		}
	}
	
	.inpBox{
		margin-top: 30upx;
		margin-left: 30upx;
		overflow: hidden;
		view{
			font-size: 22upx;
		}
		>view:nth-child(1){
			width: 48%;
			float: left;
		}
		>view:nth-child(2){
			width: 48%;
			float: right;
		}
	}
	
	.box{
		width: 90%;
		margin-top: 30upx;
		margin-left: 30upx;
		position: relative;
	}
	
	.xieyi{
		
		margin-top: 30upx;
		margin-left: 30upx;
		font-size: 20upx;
	}
	
	.onbtn{
		margin-top: 60upx;
		margin-left: 30upx;
		width: 90%;
		height: 80upx;
		line-height: 80upx;
		background-color: #FFDB00;
		color: #000;
		text-align: center;
		border-radius: 30upx;
	}
	
	.msg{
		margin-top: 40upx;
		margin-left: 30upx;
		width: 90%;
		text-align: center;
		box-shadow: 3px 3px 5px #aba8a8;	
		view>image{
			width: 100%;
			border-radius: 20upx;
		}
		background-color: #F8F9FB;
		
		.sjcss{
			text-align: right;
			font-size: 22upx;
			margin: 10upx ;
		}
	}
	
</style>
